@charset "UTF-8";
/* Browser Reset */

body {
    font-family: Verdana,Arial; font-size: 14px; color: #000000;
	margin: 10;
	padding: 10;
}

.P1 {
  font-family: monospace; font-size: 1.2em; color: #008000;
}

.P2 {
    font-family: monospace; font-size: 0.8em; color: #008000;
}

.vorschau {  /*  wird nicht gebraucht  */
    background: #00BFFF;
    height: 95%;  /* 150px; */
    overflow: auto;
    width: 100px;
    border: 1px solid #000;
    padding: 10px;
} 

.hauptbild {  /*  wird nicht gebraucht  */
    background: #00BFFF;
    height: 150px;
    overflow: auto;
    width: 200px;
    border: 1px solid #000;
    padding: 10px;
}

.d_rot   {  color: #990000; }
.d_gruen {  color: #007900; }
.d_blau  {  color: #0000B0; }

.h_rot   {  color: #FF8080; }
.h_gruen {  color: #80FF80; }
.h_blau  {  color: #8080FF; }


/*  grossbild für body des Hauptfiles  */
#grossbild {
    font-family: Verdana,Arial; font-size: 16px; color: #000000;
    background-color: #505050;
	margin: 0;
	padding: 0;
	
	max-height: 100%;
}
/* cellpadding  */
th, td { padding: 3px;
         text-align: left;
         vertical-align: top; }

.td1 { padding: 3px;
    text-align: left;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-size: 0.8em;
    color: #000000;
     }

.td2 { padding: 2px;
    text-align: right;
    vertical-align: middle;
     }

.td3 {
    vertical-align: top;
     }

.td4 { padding: 2px;
    text-align: center;
    vertical-align: top;
     }

#groBild{
	position: fixed;/*position: fixed;   */
	top: 50px; left: 150px;
	
	max-height: calc(100% - 90px);/* Leerzeichen um das Minuszeichen unbedingt eintragen!!!   */
	max-width: calc(100% - 170px);
	
	padding: 0px;
	border: 1px ridge #BBBBBB;
	background-color: #BBBBBB;
}

#bildText{
	position: fixed;
	top: 0px; left: 150px;

	padding: 2px;
	border: 1px ridge #BBBBBB;
	background-color: #F0F0F0;
}

img {
	max-width: 95%;
	max-height: 95%;
	/*
    border: #808080;
	border-width: 2;
	border-style: dotted;
	*/
	border-style: none;
	border-color: #8080FF;
	height: auto;
        padding: 1% 1%;
}

img.voll {
	border-style: none;
    max-width: 95%;
	height: auto; 
    padding: 2% 2%;
    
    max-height: 95%;
}

img.mini {
	border-style: none;
    max-width: 100px;
	height: auto;
    padding: 2% 2%;
}

.links { float: left; margin-right: 10px; } 
.rechts { float: right; margin-left: 10px; } 


a:link    { color: #0000FF; text-decoration: none; }
a:active  { color: #0000FF; text-decoration: none; }
a:visited { color: #0000A0; text-decoration: none; }
a:hover   { color: #E00000; text-decoration: none; }


#seite {
	max-width: 1200px;
	margin:0 auto;
}

#header {
	padding: 1% 1%;
	font-family:Arial;
    color: #FFFFFF;
	background-color: #A0A0FF;
	font-size: 1.4em;
}

#content {
	width: 100.0%;
	padding: 0 10px;
	font-size:1.4em;
	float: left;
	background-color: #FFFFFF;
}

#sidebar {
	width: 100px;
	height: 95%;
	padding: 2px 2px;
	float: left;
	overflow: auto;
	background-color: #DDD;
	margin: 10px;
}

#footer {
	padding: 10px 10px;
	background-color: #DDD;
	clear: both;
	font-size: 1.3em;
    font-family: Arial;
    color='#000000';"
}

@media screen and (orientation:portrait) and (max-width:480px)  
{
    
    #sidebar {
		width: 100px;
		height: 95%;
		float: none;
	}

    #content {
	width: 95%;
	padding: 0 3%;
	font-size:1.2em;
	float: none;
	background-color: #FFFFFF;
    }
    
    #groBild{
	position: fixed;
	top: 100px; left: 50px;
    width: 80%;
	padding: 2px;
	border: 1px ridge #BBBBBB;
	background-color: #BBBBBB;
    }
    
    #sidebar {
	width: 90px;
	padding: 1% 1%;
	float: left;
	background-color: #DDD;
	margin: 0;
    }
    
    #bildText{
	position: fixed;
	top: 1px; left: 100px;
	padding: 2px;
	border: 1px ridge #BBBBBB;
	background-color: #F0F0F0;
    }
    
    
    img {
     border-style: dotted;
 	 border-color: #8080FF;
	 max-width: 95%;
	 height: auto;
        padding: 2% 2%;
    }
        
}